<!DOCTYPE html>
<html>
<head>
	<title>号码详情</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/detail.css">
	<style type="text/css">
        [v-cloak]{display: none;}
        .btn.order_btn{background: #2D72E8;}
        .pay_way .init{color:#C1C1C1;}
    </style>
</head>
<body class="number_detail">
<div id="app" v-cloak>
    <div class="title head pad_usual">在线预定靓号入网注意事项</div>
    <div class="pad_usual process_box">
        <img src="img/xhlc.png" class="process_img" alt="">
    </div>
    <div class="detail_tips pad_usual">
        <div class="line"></div>
        <p>1、预约不需要在线支付！</p>
        <p>2、预约成功后，客服首先核实号码，然后确定是否交易。</p>
        <p>3、用户可以随时取消订单,不承担任何费用！</p>
        <p>4、网站号码13608039732为成都移动号码, 成都移动号码可以在全球通,神州行,畅听卡,动感地带套餐中互转;</p>
        <p>5、根据国家工信部相关规定，所有手机号码销售都需要提供身份证实名验证,到店自取。需要您上传身份证照片及在收货时查看身份证原件及收取复印件。</p>
    </div>
    <div class="line_bg"></div>
    <div class="title head pad_usual">预约号码</div>
    <div class="number_on disFlex pad_usual" style="background:#2D72E8">
        <div class="number_span">
            <span>139</span><span>1010</span><span>2959</span>
        </div>
        <div class="number_item1"><span>成都</span>&emsp;&emsp;<span>移动</span></div>
        <div class="phone_bills">
            ￥100 (含话费40元)
        </div>
    </div>
    <div class="pad_usual">
        <div class="sub_title">预留对象(自用/客户)</div>
        <div class="pay_way">
            <select name="" id="" v-model="pay_way">
                <option value="" class="init">请选择预留对象</option>
                <option value="">自用</option>
                <option value="">客户</option>
            </select>
            <img src="img/arr_right.png" alt="" class="icon_right">
        </div>
        <div class="sub_title">订单类型(线上线下)</div>
        <div class="pay_way">
            <select name=""  v-model="order_type">
                <option value="" class="init">请选择订单类型</option>
                <option value="">线上</option>
                <option value="">线下</option>
            </select>
            <img src="img/arr_right.png" alt="" class="icon_right">
        </div>
        <div class="sub_title">客户信息</div>
        <div class="address_one">
            <div class="address_item">
                <label>姓&emsp;&emsp;名</label> <input type="text" v-mode="user" placeholder="填写收货人姓名">
            </div>
            <div class="address_item">
                <label>联系电话</label>
                <input type="text" v-model="mobile" placeholder="填写手机号">
            </div>
        </div>
        <div class="btn order_btn mt_1rem manage" @click="orderBtn">
                立即预约
        </div>
    </div>
    <div class="layer_mask pay_success" v-show="pay_type==1">
        <div class="layer_mask_box">
            <img src="img/close_icon.png" class="icon_close" @click="pay_type=0" alt="">
            <div class="title">预约成功</div>
            <div class="btn_box mt_40h">
                <div class="btn">知道了</div>
            </div>
        </div>
    </div>
    <div class="layer_mask pay_success one" v-show="pay_type==2">
        <div class="layer_mask_box">
            <img src="img/close_icon.png" class="icon_close" @click="pay_type=0" alt="">
            <div class="title">预约失败</div>
            <div class="content">
                手慢一步！您选择的号码已经被别人预约啦，您可以去看看更多的靓号哟~
            </div>
            <div class="btn_box mt_40h">
                <div class="btn">看更多</div>
            </div>
        </div>
    </div>
    
</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
var app = new Vue({
	el:"#app",
	data:{

        pay_way:"",
        order_type:"",
        user:"",
        mobile:"",
        code:"",
        codeIf:true,
        codeMsg:"",
        codeTime:60,
        codeInter:"",
        province:"",
        city:"",
        country:"",
        address:"",

        moreIf:true,
        isCheck:true,
        addressList:[{on:1},{on:0}],
        pay_type:0, //1 预约成功 2 预约失败

    },
	methods:{
        orderBtn:function () {
          location.href="online_add.html?type=1"
        },
		packBtn:function (i) {
			this.packList.forEach(function (item) {
				item.on=0;
            });
			this.packList[i].on=1;
        },
        addressBtn:function (i) {
          this.addressList.forEach((item)=>{
              item.on=0
          });
          this.addressList[i].on=1;
        },
	},
	created:function(){},
	mounted:function(){}
})	

</script>
</body>
</html>